<!--
 * @Description: 
 * @Author: wangchao
 * @Date: 2023-01-28 10:18:17
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>防抖</title>
  </head>
  <body>
    <input type="text" id="input" />

    <script>
      const input = document.getElementById("input");
      function debounced(delay, firstFunc = null) {
        let timer = null;
        // val为防抖结束后传递过去的值
        return (val, secondFunc = null) => {
          // 利用promise的声明即执行的特性，获取到timer
          clearTimeout(timer);
          return new Promise(resolve => {
            timer = setTimeout(() => {
              // 兼容3种方式 secondFunc优先
              if (secondFunc) {
                secondFunc(val);
              } else if (firstFunc) {
                firstFunc(val);
              }
              resolve(val);
            }, delay);
          });
        };
      }
      let debouncedFunc = debounced(1000, v =>
        console.log("方式1: 通过传递总函数得到的：" + v)
      );
      input.addEventListener("keyup", e => {
        // 将函数回调权交给开发者
        // 方式1：
        // debouncedFunc(e.target.value);
        // 方式2：
        // debouncedFunc(e.target.value, val => {
        //   console.log("方式2: 通过传入内部函数得到的：" + val);
        // });
        // 方式3：
        // debouncedFunc(e.target.value).then(val => {
        //   console.log("方式3：通过promise回调得到的：" + val);
        // });
      });
    </script>
  </body>
</html>
